// 使用 Mixin 来复用重复的代码 不明白就去看vue文档 混入
import { mapGetters, mapActions } from "vuex"; // 为了简化调用
import { themeList, addCss, removeAllCss, getReadTimeByMinute } from './book'
import { saveLocation } from '../utils/localStorage'

export const ebookMixin = {
    computed: {
        ...mapGetters([
            'fileName',
            'menuVisible',
            'settingVisible',
            'defaultFontSize',
            'defaultFontFamily',
            'fontFamilyVisible',
            'defaultTheme',
            'bookAvailable',
            'progress',
            'section',
            'isPaginating',
            'currentBook',
            'navigation',
            'cover',
            'metadata',
            'paginate',
            'pagelist',
            'offsetY',
            'isBookmark'
        ]),
        themeList() { // 返回主题列表
            return themeList(this);
        }
    },
    methods: {
        ...mapActions([
            'setFileName',
            'setMenuVisible',
            'setSettingVisible',
            'setDefaultFontSize',
            'setDefaultFontFamily',
            'setFontFamilyVisible',
            'setDefaultTheme',
            'setBookAvailable',
            'setProgress',
            'setSection',
            'setIsPaginating',
            'setCurrentBook',
            'setNavigation',
            'setCover',
            'setMetadata',
            'setPaginate',
            'setPagelist',
            'setOffsetY',
            'setIsBookmark'
        ]),
        initGlobalStyle() {
            removeAllCss() //先移出所有的主题Css文件
            // 动态添加css样式文件
            switch (this.defaultTheme) {
                case "Default":
                    addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_default.css`);
                    break;
                case "Eye":
                    addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_eye.css`);
                    break;
                case "Gold":
                    addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_gold.css`);
                    break;
                case "Night":
                    addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_night.css`);
                    break;
                default:
                    addCss(`${process.env.VUE_APP_RES_URL}/theme/theme_default.css`);
                    break;
            }
        },
        refreshLocation() {
            // 当阅读进度改变后 重新刷新 进度条 并且保存到本地
            const currentLocation = this.currentBook.rendition.currentLocation()
            if (currentLocation && currentLocation.start) {
                const startCfi = currentLocation.start.cfi
                const progress = this.currentBook.locations.percentageFromCfi(startCfi)
                this.setProgress(Math.floor(progress * 100)) // 设置vuex中的进度条
                this.setSection(currentLocation.start.index)
                saveLocation(this.fileName, startCfi) // 本地保存阅读进度
            }
        },
        display(target, callback) {
            // 自定义渲染 有进度时 从进度位置开始渲染 
            if (target) {
                this.currentBook.rendition.display(target).then(() => {
                    this.refreshLocation()
                    if (callback) callback()
                })
            } else {
                // 通过Rendtion.display渲染电子书
                // 没进度时 从头开始渲染
                this.currentBook.rendition.display().then(() => {
                    this.refreshLocation()
                    if (callback) callback()
                })
            }
        },
        hideTitleAndMenu() {
            // 翻页后隐藏上下的导航
            // this.$store.dispatch("setMenuVisible", false)
            this.setMenuVisible(false);
            this.setSettingVisible(-1); // 隐藏字号设置等按钮
            // 隐藏字体设置窗口
            this.setFontFamilyVisible(false);
        },
        getReadTimeText() {
            // 获取阅读时间
            return this.$t("book.haveRead").replace("$1", getReadTimeByMinute(this.fileName));
        }
    }
}